<template>
	<view id="customsBox" class="customs-box" :style="'height: calc(100vh - '+ topValue +'px);margin-top: '+ topValue +'px;'"> 
		<!-- 单条单据 -->
		<empty v-if="!list || list.length == 0"></empty>
		<view  class="item" v-for="(item, index) in list" :key="index" @click="clickItem(item,index)" :class="item.id == customId ? 'active' : ''">
			<view class="item-img">
				<image :src="item.avatar"  v-if="item.avatar"></image>
				<view  class="imge-default-box">
					<text class="imge-default">{{item.name ? String(item.name).substr(0,1) : "散" }}</text>
				</view>
			</view>
			<view class="cust-info">
				<view class="c-tit" ><text v-if="isShowName">{{item.name ? item.name : "散客"}}</text><text class="cp-txt" v-if="isShowCp">{{item.company ? "  " + item.company : ""}}</text></view>
				<view class="c-phone">{{item.cellphone ? item.cellphone:""}}</view>
				<view class="c-time">{{item.title}}<text class="c-t-txt">{{item.value}}</text></view>
			</view>
		</view>
	</view>
</template>

<script>
	import empty from '../comm/empty.vue';
	import staticConst from "../../js/const/StaticConst.js";
	import util from '../../js/util/Util.js';
	export default
	{
		components:{ empty },
		props:['list',"isSearching","topValue","md","isShowName","isShowCp"],
		data(){
			return{
				customId:null,
				customImg : staticConst.DEFAULT_IMG,
			}
		},
		methods:{
			clickItem(item)
			{
				if(this.customId == item.id) return;
				this.customId = item.id;
				this.$emit("setSuppmInfo",item);
			},
			
			setCustomId(id)
			{
				this.customId = id;
			},
			
			setGdSuppIdNull()
			{
				this.customId = null;
			},
			
			handlerScroll()
			{
				this.$nextTick(()=>
				{
					var flag = util.scrollData("#customsBox");
					if(flag)
					{
						// 加载数据
						if(!this.isSearching)
						{
							this.$emit("getSuppList");
						}
						else
						{
							this.$emit("searchSuppCatAndKwList");
						}
					}
				});
			},
		},
		
		mounted()
		{
			if(document.querySelector("#customsBox"))
				document.querySelector("#customsBox").addEventListener("scroll",this.handlerScroll,true);
		},
		
		destroyed()
		{
			if(document.querySelector("#customsBox"))
				document.querySelector("#customsBox").removeEventListener("scroll",this.handlerScroll);
		},
	}
</script>

<style lang="scss">
	.customs-box {
		width: 343px;
		overflow-y: auto;
		height: calc(100vh - 110px);
		margin-top: 110px;
		.item {
			padding-top: 5px;
			background: #fff;
			cursor: pointer;
			border-bottom: 1px #EFEFEF solid;
			padding: 10px;
			background: #FFF;
			display: flex;
			align-items: center;
			.item-img
			{
				width: 80px;
				height: 80px;
				border-radius: 4px;
				overflow: hidden;
				image
				{
					width: 80px;
					height: 80px;
				}
				.imge-default-box
				{
					height: 80px;
					width: 80px;
					background-color: #EEE;
					display: flex;
					align-items: center;
					.imge-default
					{
						
						text-align: center;
						line-height: 80px;
						font-size: 30px;
						font-weight: bold;
						width: 100%;
						color: #333;
					}
				}
			}
			
			.cust-info
			{
				padding-left : 10px;
				width : calc(100% - 100px);
				.c-tit
				{
					font-size: 18px;
					color: #333;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
					word-break: break-all;
					.cp-txt
					{
						color: #999;
					}
				}
				.c-phone
				{
					color: #ccc;
					font-size: 12px;
				}
				.c-time
				{
					color: #333;
					.c-t-txt
					{
						color: red;
						padding-left: 5px;
					}
				}
				
			}
			
		}
		
		.item:hover {
			&.active {
				background: #F8F8F8;
			}
			background:#F8F8F8;
		}
		.active {
			background: #F8F8F8;
		}
	}
	
	.customs-box::-webkit-scrollbar {
		/*滚动条整体样式*/
		width: 5px; /*高宽分别对应横竖滚动条的尺寸*/
		height: 1px;
	}
	
	.customs-box::-webkit-scrollbar-thumb {
		/*滚动条里面小方块*/
		border-radius: 10px;
		-webkit-box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);
		background: #ccc;//rgba(0, 0, 0, 0.0);
		scrollbar-arrow-color: red;
	}
	.customs-box::-webkit-scrollbar-track {
		/*滚动条里面轨道*/
		-webkit-box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.0);
		border-radius: 0;
		background: rgba(0, 0, 0, 0);
	}
</style>
